﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <title>店铺周目标</title>
    <script src="js/jquery/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script src="js/config.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/btnsty.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/editform.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/global.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <script src="js/Toast.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8" src="js/barcodescanner.js"></script>
    <script src="js/laydate.js" type="text/javascript"></script>
    <script src="js/iscroll.js" type="text/javascript"></script>
    <link href="css/scrollbar.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" charset="utf-8">
        var pageindex = 0;
        var pagecount = 10;
        $(function () {
            laydate.skin('molv'); //切换皮肤，请查看skins下面皮肤库
            GetStockList();
            $("#btnSave").live("click", function () {
                if ($("#shoplist option:checked").val() == "0") {
                    showtoast("请选择店铺！", null, 100, 100);
                    return;
                }
                if ($("#txtbdate").val() == "" || $("#txtedate").val() == "") {
                    showtoast("请输入日期！", null, 100, 100);
                    return;
                }
                SaveTarget();
            });

            $("#loadMore").live("click", function () {
                GetTargetPageList($("#shoplist option:checked").val());
            });
        });
        function SaveTarget() {
            $.ajax({
                url: url_path + "/ajaxdata/ShopTarget.aspx",
                type: "POST",
                data: { aciton: 'SaveTarget', shopid: $("#shoplist option:checked").val(),
                    shopname: $("#shoplist option:checked").text(), bdate: $("#txtbdate").val(),
                    edate: $("#txtedate").val(), targetamt: $("#txttargetamt").val()
                },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    if (msg == "ERROR") {
                        alert("数据保存出错！");
                    } else {
                        showtoast("数据保存成功！", null, 100, 100);
                        GetTargetList($("#shoplist option:checked").val());
                    }
                },
                error: function () {
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
        function GetStockList() {
            USER_ID = localStorage.getItem("UserID");
            $.ajax({
                url: url_path + "/ajaxdata/Default.aspx",
                type: "POST",
                data: { aciton: 'GetShopList', userid: USER_ID },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    if (msg == "NO_DATA") {
                        alert("您没有任何店仓权限，请联系管理员！");
                    } else {
                        var orderObj = JSON.parse(msg);
                        var html = "";
                        for (var i = 0; i < orderObj.length; i++) {
                            html += '<option value="' + orderObj[i].shopid + '">' + orderObj[i].shopname + '</option>'
                        }
                        $("#shoplist").html(html);
                        $("#shoplist").selectindex = 0;
                    }
                    GetTargetList($("#shoplist option:checked").val());
                },
                error: function () {
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
        function GetTargetList(shopid) {
            $.ajax({
                url: url_path + "/ajaxdata/ShopTarget.aspx",
                type: "POST",
                data: { aciton: 'GetTargetList', shopid: shopid, pagecount: pagecount },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    var html = "";
                    if (msg == "NO_DATA") {
                        html = '<li class="btnlist"><div>'
                        + '暂无记录！</div></li>';
                    } else {
                        var orderObj = JSON.parse(msg);
                        for (var i = 0; i < orderObj.length; i++) {
                            html += '<li class="btnlist"><div>'
                                + '开始日期：' + orderObj[i].bdate + '&nbsp;&nbsp;&nbsp; 截止日期：' + orderObj[i].edate
                                + '<br/><span>目标额：' + orderObj[i].targetamt + '</span>元'
                                + '</div></li>'
                        }
                    }
                    $("#datalist").html(html);
                },
                error: function () {
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
        function GetTargetPageList(shopid) {
            $.ajax({
                url: url_path + "/ajaxdata/ShopTarget.aspx",
                type: "POST",
                data: { aciton: 'GetTargetPageList', shopid: shopid, pageindex: ++pageindex, pagecount: pagecount },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    var html = "";
                    if (msg == "NO_DATA") {
                        showtoast("没有数据可以加载了！", null, 100, 100);
                    } else {
                        var orderObj = JSON.parse(msg);
                        var li, el;
                        el = document.getElementById('datalist');
                        for (var i = 0; i < orderObj.length; i++) {
                            html = '<div>'
                                + '开始日期：' + orderObj[i].bdate + '&nbsp;&nbsp;&nbsp; 截止日期：' + orderObj[i].edate
                                + '<br/><span>目标额：' + orderObj[i].targetamt + '</span>元'
                                + '</div>'
                            li = document.createElement("li");
                            li.innerHTML = html;
                            el.appendChild(li, el.childNodes[0]);
                        }
                    }
                },
                error: function () {
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
    </script>
    <script type="text/javascript">

        var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

        /**
        * 下拉刷新 （自定义实现此方法）
        * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
        */
        function pullDownAction() {
            setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
                GetTargetList($("#shoplist option:checked").val());
                myScroll.refresh(); 	//数据加载完成后，调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
            }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
        }

        /**
        * 滚动翻页 （自定义实现此方法）
        * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
        */
        function pullUpAction() {
            setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
                GetTargetPageList($("#shoplist option:checked").val());
                myScroll.refresh(); 	// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
            }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
        }

        /**
        * 初始化iScroll控件
        */
        function loaded() {
            pullDownEl = document.getElementById('pullDown');
            pullDownOffset = pullDownEl.offsetHeight;
            pullUpEl = document.getElementById('pullUp');
            pullUpOffset = pullUpEl.offsetHeight;

            myScroll = new iScroll('wrapper', {
                scrollbarClass: 'myScrollbar', /* 重要样式 */
                useTransition: false, /* 此属性不知用意，本人从true改为false */
                topOffset: pullDownOffset,
                onRefresh: function () {
                    if (pullDownEl.className.match('loading')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                    } else if (pullUpEl.className.match('loading')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                    }
                },
                onScrollMove: function () {
                    if (this.y > 5 && !pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'flip';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
                        this.minScrollY = 0;
                    } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                        this.minScrollY = -pullDownOffset;
                    } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'flip';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                        this.maxScrollY = pullUpOffset;
                    }
                },
                onScrollEnd: function () {
                    if (pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'loading';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
                        pullDownAction(); // Execute custom function (ajax call?)
                    } else if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                        pullUpAction(); // Execute custom function (ajax call?)
                    }
                }
            });

            setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
        }

        //初始化绑定iScroll控件 
        //        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        //        document.addEventListener('DOMContentLoaded', loaded, false); 

    </script>
    <style type="text/css">
    #wrapper 
    {
        position:absolute; z-index:1;
        top:50px; bottom:0px; left:0;
        width:100%;
        background:#efefef;
        overflow-y:auto;
        overflow-x:hidden;
    }

    #scroller {
        position:relative;
        /*	-webkit-touch-callout:none;*/
        -webkit-tap-highlight-color:rgba(0,0,0,0);

        float:left;
        width:100%;
        padding:0;
    }

    #scroller ul {
	    position:relative;
	    list-style:none;
	    padding:0;
	    margin:0;
	    width:100%;
	    text-align:left;
    }


/**
 *
 * 下拉样式 Pull down styles
 *
 */
#pullDown, #pullUp 
{
	background:#fff;
	height:40px;
	line-height:40px;
	padding:5px 10px;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	font-size:14px;
	color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
	display:block; float:left;
	width:40px; height:40px;
	background:url(./images/pull-icon@2x.png) 0 0 no-repeat;
	-webkit-background-size:40px 80px; background-size:40px 80px;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:250ms;	
}
#pullDown .pullDownIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon  {
	-webkit-transform:rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
	-webkit-transform:rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
	background-position:0 100%;
	-webkit-transform:rotate(0deg) translateZ(0);
	-webkit-transition-duration:0ms;

	-webkit-animation-name:loading;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

@-webkit-keyframes loading {
	from { -webkit-transform:rotate(0deg) translateZ(0); }
	to { -webkit-transform:rotate(360deg) translateZ(0); }
}

</style>
</head>
<body>
    <div id="header" class="head">
        <div class="wrap">
            <i class=" menu_back2"><a href="index.html"></a></i>
            <div class="title">
                <span class="title_d">
                    <p>
                        店铺周目标</p>
                </span>
                <div class="clear">
                </div>
            </div>
        </div>
        <div class="logo_msk">
        </div>
    </div>
    <div id="wrapper">
        <div id="scroller">
            <!--<div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
            </div>-->
            <div style="position: relative; background: #fff; margin: 8px; border: 1px solid #ddd;">
                <ul class="input-group2">
                    <li><strong>店铺：</strong><hr />
                        <select id="shoplist">
                            <option value="0">数据加载中...</option>
                        </select></li>
                    <li><strong>开始日期：</strong><hr />
                        <input id="txtbdate" class="laydate-icon" value="" onclick="laydate({ elem: '#txtbdate' });"
                            placeholder="点击选择日期"></li>
                    <li><strong>截止日期：</strong><hr />
                        <input id="txtedate" class="laydate-icon" value="" onclick="laydate({ elem: '#txtedate' });"
                            placeholder="点击选择日期"></li>
                    <li><strong>本周目标：</strong><hr />
                        <input id="txttargetamt" class="ipt ipt-sku" type="text" placeholder="输入目标金额" /></li>
                </ul>
            </div>
            <div class="mod_btns">
                <a id="btnSave" class="mod_btn bg_2" href="#">保存</a>
            </div>
            <div style="margin: 3px; padding: 5px; background-color: #ededed; border-radius: 5px;">
                <div style="font-size: 15px;">
                    <span style="color: #ff0000;"><strong>历史数据列表：</strong> </span>
                </div>
                <ul id="datalist" class="dlist">
                    <!--<li class="btnlist">
                    <div>
                        开始日期：2016-02-01&nbsp;&nbsp;&nbsp; 截止日期：2016-02-01&nbsp;&nbsp;&nbsp;目标额：<span>5000000</span>元
                    </div>
                </li>-->
                </ul>
                <!-- <div id="pullUp">
                    <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
                </div>-->
                <div id="loadMore" style="background-color: #DDD; color: #555; line-height: 35px;
                    text-align: center;">
                    <span>加载更多数据</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
